<template>
  <section class="home-section-func">
    <header class="home-section-func-header" v-if="Props.showFuncHeader">
      <div
        class="home-section-func-h-item"
        v-for="item in KefuList"
        :key="item.title"
        @click="doHandleKfClick(item)"
        v-changeBig="1.05"
      >
        <aside class="home-section-func-h-item-l">
          <img :src="item.img" />
          <div class="home-section-func-h-item-l-title">{{ item.type }}</div>
        </aside>
        <aside class="home-section-func-h-item-r">
          <header class="home-section-func-h-item-r-t">{{ item.title }}</header>
          <section class="home-section-func-h-item-r-text">
            {{ item.content }}
          </section>
        </aside>
      </div>
    </header>
    <KfieldLine label="常用功能" />
    <FrequentlyFunc />
  </section>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
// 组件
import { KfieldLine } from "@comp/index";
// 类型
import { KfList_Em, KefuList_Intf } from "@/view/home/type";
// 常量
import { KefuList } from "../config";

import { FrequentlyFunc } from "@/view/home/components";
const Routes = useRouter();

const Props = defineProps({
  showFuncHeader: {
    type: Boolean,
    default: true,
  },
});
const handleZnkf = () => {
  window.open(
    "http://www.4008800016.com/MTalk/talk/visitor/dialog?config_id=1&come=Service",
    "KONKAWEBCHAT",
    "height=700,width=1000,location=0,menubar=0,status=0,titlebar=0,toolbar=0"
  );
};
// 点击 进行跳转
const doHandleKfClick = (item: KefuList_Intf) => {
  // 如果是智能客服 需单独处理
  if (item.type === KfList_Em.ZHINENGKEFU) {
    handleZnkf();
    return;
  }

  Routes.push(item.url as string);
};
</script>
<style scoped lang="less">
@import "@/style/mobile/index.less";

.home-section-func-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 20px;
  .home-section-func-h-item {
    display: flex;
    flex: 1;
    border-radius: 8px;
    box-shadow: 0 0 10px 5px #cccccc9c;
    padding: 15px 6px;
    cursor: pointer;
    &-l {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
      }
      &-title {
        font-size: 12px;
        line-height: 25px;
        height: 25px;
        margin-top: 5px;
        padding: 0 10px;
        background-color: #1e9fff;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
      }
    }
    &-r {
      flex: 1;
      &-t {
        font-weight: bold;
        color: #333;
        font-size: 16px;
      }
      &-text {
        color: #999;
        margin-top: 10px;
        line-height: 18px;
      }
    }
  }
}

// 没有设置宽度的话 块级元素默认占满屏幕宽度
.home-section-func {
  background-color: white;
  // 有宽度的情况下 会让其自动居中
  margin: 0 auto;
  padding: 50px 25px;
  box-sizing: border-box;
}
</style>
